=<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .nav {
            height: 60px;
            width: 100%;
        }

        .nav a {
            float: left;
            margin-top: 20px;
            margin-right: 20px;
        }
        .nav span {
            float: right;
            margin-top: 20px;
            margin-left: 20px;
        }
        .search {
            margin: 70px auto;
            height: 129px;
            width: 270px;
            background-image: url(../images/baidu_logo.png);
            background-size: 100% 100%;
        }

        form {
            height: 40px;
            width: 654px;
            position: relative;
            top: 130px;
            left: -100px;
        }

        input[type=text] {
            height: 40px;
            width: 380px;
            border-radius: 10px;
            border: 2px solid #c4c7ce;
            text-indent: 20px;
        }

        .photo {
            height: 24px;
            width: 24px;
            background-image: url(../images/photo.png);
            background-position: 0px 50px;
            position: relative;
            left: 340px;
            top: -35px;
        }

        input[type=submit] {
            height: 40px;
            width: 100px;
            background-color: #4e6ef2;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            position: relative;
            left: 370px;
            top: -64px;
            border: 1px solid #c4c7ce;
            color: white;
            font-size: 17px;
        }

        .hotSearch {
            height: 400px;
            width: 600px;
            position: relative;
            left: 520px;
            top: 30px;
        }

        .first {
            width: 450px;
        }

        .first .two {
            float: right;
        }

        .second .aa {
            float: left;
            margin-right: 10px;
        }

        .second .bb {
            float: left;
            margin-right: 10px;
        }

        .second .cc {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
   <div class="nav">
       <a href="">新闻</a>
       <a href="">hao123</a>
       <a href="">地图</a>
       <a href="">贴吧</a>
       <a href="">视频</a>
       <a href="">图片</a>
       <a href="">网盘</a>
       <a href="">更多</a>
       <span>登录</span>
       <span>设置</span>
   </div>
   <div class="search">
       <div class="image"></div>
       <form action="">
           <input type="text">
           <div class="photo"></div>
           <input type="submit" value="百度一下">
       </form>
   </div>
   <div class="hotSearch">
       <div class="first">
           <span class="one">百度热搜</span>
           <span class="two">换一换</span>
       </div>
       <div class="second">
           <a class="aa" href="">一图速览“促进民营经济发展28条”</a>
           <a class="aa" href="">3 全力以赴 应对极端降雨</a>
           <a class="bb" href="">1 河北天津泄洪保北京？专家：不准确热</a>
           <a class="bb" href="">4 快递被暴雨泡毁赔不赔？公司回应</a>
           <a class="cc" href="">2 800多年卢沟桥暴雨后安然无恙热</a>
           <a class="cc" href="">5 男子把买房送的1000克黄金卖了45万</a>
       </div>
   </div>
</body>
</html>